<template>
  <div class="box" ref="target"></div>
</template>

<script>
import { useIntersectionObserver } from '@vueuse/core'
import { onMounted, ref } from 'vue'
export default {
  setup () {
    // vue2 写法通过ref绑定获取到标签的状态，但是在vue3中没有this,说以没法使用
    // Vue2.x 获取元素
    // this.$refs.target
    // 🔔 Vue3.x 通过 ref 创建关联，模板中还是通过 ref="xxx" 绑定
    const target = ref(null)
    onMounted(() => {
      console.log(target.value)
      const { stop } = useIntersectionObserver(
        // 被检测的目标元素，可以是组件，也可以是DOM元素
        target,
        ([{ isIntersecting }], observerElement) => {
          // 如果元素可见为true 发送请求
          if (isIntersecting) {
            // 模拟发送请求
            console.log('isIntersecting元素是否可见，发送请求', isIntersecting)
            console.log(stop)
            // 调用stop函数避免多次重复发送请求并且停止检测
            stop()
          }
        }
      )
    })
    /*
  1.stop 一个可执行的函数用来停止监听行为
  2.target 一个由ref api调用之后形成的RefImpl对象 也可以是一个dom对象
  3.isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
  特别注意: 对于目标target是否进入视口区域的监听会一直进行不会只监听一次
*/
    return { target }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin: 1000px auto;
}
</style>
